<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<script src="js/jquery.js"></script>
<body>
<form action="/page" method="post">
    图书名称：<input type="text" name="name" th:value="${name}">
    图书作者：<input type="text" name="author" th:value="${author}">
    <input type="submit" value="查询">
    <input type="button" onclick="window.location.href='/info'" value="新增">
    <input type="submit" value="删除" onclick="del()">
</form>
<table border="1px">
    <tr>
        <td>选择</td>
        <th>编号</th>
        <th>书名</th>
        <th>价格</th>
        <th>类目</th>
        <th>库存</th>
        <th>图片</th>
        <th>说明</th>
        <th>作者</th>
        <th>已售</th>
        <td>操作</td>
    </tr>
    <tr th:each="book:${page.records}">
        <td><input type="checkbox" th:value="${book.id}" name="id"></td>
        <td th:text="${book.id}"></td>
        <td th:text="${book.name}"></td>
        <td th:text="${book.price}"></td>
        <td th:text="${book.category}"></td>
        <td th:text="${book.pnum}"></td>
        <td th:text="${book.imgurl}"></td>
        <td th:text="${book.description}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.sales}"></td>
        <td>
            <a th:href="@{/info(id=${book.id})}">修改</a>
        </td>
    </tr>
</table>
<script>
    function del() {
        if ($("input[name='id']:checked").length==0) {
            alert("必须选择一个选项才能进行删除!")
            return false;
        }
        if (confirm("确定要删除吗?")) {
            var ids='';
            $("input[name='id']:checked").each(function (index,obj){
                var id=$(obj).val();
                ids+=id+",";
            })
            ids=ids.substr(0,ids.length-1);
            window.location.href='/del?id='+ids;
            $(obj).parents("tr").remove();
        }else {
            alert("已取消删除");
            return false;
        }
    }
</script>

总页数：<span th:text="${page.pages}"></span>
总记录数：<span th:text="${page.total}"></span>
当前为第<span th:text="${page.current}"></span>页

<span th:if="${page.current>1}">
    <a th:href="@{/page(pageNum=${page.current -1})}">上一页</a>
</span>
<!--thymeleaf模板：循环一个序列 #numbers.sequence(1,page.pages)从1开始循环-->
<span th:each="p:${#numbers.sequence(1,page.pages)}">
    <a th:href="@{/page(pageNum=${p})}" th:text="${p}"></a>
</span>
<span th:if="${page.current<page.pages}">
    <a th:href="@{/page(pageNum=${page.current+1})}">下一页</a>
</span>
</body>
</html>